<template>
  <el-container ref="container">
    <el-header style="height:auto">
      <!-- 按钮集合 -->
      <buttonGroup :buttonGroups="buttonGroups" />
    </el-header>

    <el-main>
      <tableView :viewData="viewData" :tree-props="treeProps" :columnConfigs="columnConfigs" :row-key="rowKey"
        :default-expand-all="true" :load="load" :loading="loading" :lazy="lazy" :search="search" v-model="selectData">
      </tableView>
    </el-main>

    <el-dialog :title="dialogFormTitle" width="800px" :modal-append-to-body='false' :visible.sync="dialogFormVisible">
      <dialogForm :pkid="pkid" :getData="viewData" :anthCode="anthCode" @closeMoule="closeMoule" />
    </el-dialog>

  </el-container>
</template>

<script>
import buttonGroup from '@/components/button/group'
import tableView from '@/components/table/view'
import dialogForm from "./edit.vue";
export default {
  components: {
    'buttonGroup': buttonGroup,
    'tableView': tableView,
    'dialogForm': dialogForm,
  },
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      anthCode: 'addmenu',
      pkid: 0,
      dialogFormTitle: '新增菜单',
      buttonGroups: [{
        icon: "el-icon-plus",
        text: "添 加",
        type: 'primary',
        permission: 'addmenu',
        _click: () => {
          this.anthCode = 'addmenu'
          this.dialogFormVisible = true
        }
      }, {
        icon: "el-icon-search",
        text: "搜 索",
        type: 'primary',
        _click: () => { this.search() }
      }],
      searchForm: {
        type: "",
        UnifiedExaminPredictName: "",
        region: ""
      },
      selectData: [],

      //树形表格必备二条件 详见elmentui table
      rowKey: 'MenuId',
      lazy: true,
      treeProps: {
        children: 'children',
        hasChildren: 'hasChildren'
      },
      viewData: [],
      columnConfigs: [{
        prop: 'MenuCode',
        label: '菜单编码',
      }, {
        prop: 'MenuText',
        label: '菜单名称',
      }, {
        prop: 'isshow',
        label: '是否显示',
        createScopeTemplate: (rowData) => {
          rowData.isshow = rowData.IsShow == 1 ? true : false
          var listScopeTemplate = []
          var item = {
            componentName: 'form-switch',
          }
          listScopeTemplate.push(item)

          return listScopeTemplate

        },
      }, {
        prop: 'enabled',
        label: '是否启用',
        createScopeTemplate: (rowData) => {
          rowData.enabled = rowData.Enabled == 1 ? true : false
          var listScopeTemplate = []
          var item = {
            componentName: 'form-switch',
          }
          listScopeTemplate.push(item)

          return listScopeTemplate

        },
      }, {
        prop: 'Sort',
        label: '顺序',
      }, {
        prop: 'Url',
        label: '访问地址',
      },
      {
        prop: "",
        label: "操作",
        listScopeTemplate: [
          {
            componentName: "button-input",
            icon: "el-icon-edit",
            type: "primary",
            permission: 'updatemenu',
            text: "编辑",
            _click: (index, row) => {
              this.anthCode = 'updatemenu'
              this.dialogFormTitle = "编辑菜单";
              this.pkid = row.MenuId;
              this.dialogFormVisible = true;
            },
          }, {
            componentName: "button-input",
            icon: "el-icon-s-tools",
            type: "primary",
            text: "权限按钮",
            _click: (index, row) => {
              this.addBtn(row.MenuId);
            },
          },
          // {
          //   componentName: "button-input",
          //   icon: "el-icon-delete",
          //   type: "danger",
          //   tooltip: "删除",
          //   popconfirm: true,
          //   title: "此操作将永久删除该菜单信息, 是否继续?",
          //   _confirm: (index, row) => {
          //     this.delete(row.id)
          //   },
          // },
        ],
      }],

    }
  },
  created() {
    this.search();
  },
  mounted() {
  },
  methods: {
    search() {
      let query = {
        user: "string",
        target: "MenuInfo",
        operation: "Get",
        json: {
          Order: 'Sort asc'
        }
      }
      // 请求接口
      this.$http.generalAPI(query, (res) => {
        this.loading = false;
        if (res.Code == 200) {
          //获取菜单信息
          this.viewData = this.getChildren(res.Data, res.Data.filter(c => c.ParentId == 0))
        }
      });
    },
    addBtn(menuId) {
      //添加默认
      this.$store.dispatch("tabs/addTabs",
        {
          icon: "el-icon-tickets",
          title: "按钮管理",
          basePath: "/sysbtn?menuId=" + menuId,
          index: "sysbtn",
          name: "sysbtn",
          closable: true
        }
      );
    },
    load(tree, treeNode, resolve) {
      console.log(tree, treeNode, resolve)
    },
    closeMoule(obj) {
      this.pkid = 0;
      this.dialogFormVisible = false;
      if (obj) {
        this.search();
      }
    },
    getChildren(all, infos) {
      var data = [];
      infos.forEach(item => {
        var childrens = all.filter(c => c.ParentId == item.MenuId);
        if (childrens.length > 0) {
          item.children = this.getChildren(all, childrens);
        }
        data.push(item);
      });

      return data;
    }
  },
  watch: {}

}
</script>